<template>
  <el-row>
    <el-col :span="24">
      <el-form ref="form" :model="formData" label-width="100px">
        <el-form-item label="标签：">
          <span
            v-for="item in categoryList"
            :class="category == item.id ? 'active tags' : 'tags'"
            :key="item.id"
            @click="setcategory(item.id)"
          >
            {{ item.title }}
          </span>
        </el-form-item>
        <el-form-item label="图片上传：" prop="imgList">
          <uploadimg
            :imgModel="formData"
            @deleteimg="picturedel"
            class="uploaditem"
            @uploadimgok="pictureok"
            :multipleopen="multipleopen"
            :imgList="formData.imgList"
            :upData="uploadData"
            :uploadUrl="uploadUrl"
            :isListremove="true"
          >
            <span slot="text">上传的图片大小不得超过10M</span>
          </uploadimg>
        </el-form-item>
      </el-form>
    </el-col>

    <el-col :span="24" class="pagination">
      <!-- 翻页 -->
      <el-pagination
        class="fr"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.page"
        :page-sizes="[10, 20, 30]"
        :page-size="10"
        background
        layout="total, sizes, prev, pager, next"
        :total="pageData.total"
      ></el-pagination>
    </el-col>
  </el-row>
</template>
<script>
//引入图片上传组件
import { getAccessToken } from '@/utils/accessToken'
import { schoolphoto, photoupload, photodelete } from '@/api/school'
import uploadimg from '@/components/uploadimg/uploadimg'
import { getSessionStorage } from '@/utils/accessToken'
//上传图片的路径
import { baseURL } from '@/config/index'
export default {
  components: {
    uploadimg,
  },
  data() {
    return {
      baseURL,
      multipleopen: true,
      headersobj: {
        token: getAccessToken(),
      },
      //页码
      page: 1,
      rows: 40,
      //一页多少条数据
      uploadUrl: '/school/photo/upload',
      pageData: {},
      category: null,
      formData: {},
      categoryList: [],
      imgList: [],
      uploadData: {},
    }
  },
  mounted() {
    this.categoryList = getSessionStorage('Options')[36]
    this.category = this.categoryList[0].id
    this.getschoolphoto()
  },
  watch: {
    category(val) {
      this.uploadData.category = val
    },
  },
  methods: {
    //翻页 一页有多少条数据
    handleSizeChange(val) {
      this.rows = val
      //获取数据
      this.getschoolphoto()
    },
    //翻页码
    handleCurrentChange(val) {
      this.page = val
      //获取数据
      this.getschoolphoto()
    },
    async getschoolphoto() {
      let params = {
        page: this.page,
        rows: this.rows,
        category: this.category,
      }
      let data = await schoolphoto(params)
      this.imgList = data.data.list
      this.pageData = data.data.page
      let urlList = []
      this.imgList.forEach((p) => {
        urlList.push(p.url)
      })
      this.formData.imgList = urlList
    },
    setcategory(val) {
      this.category = val
      this.getschoolphoto()
    },
    //删除图片
    picturedel(index) {
      console.log(index)
      let id = this.imgList[index].id
      this.gophotodelete(id)
    },
    async gophotodelete(id) {
      let data = await photodelete({ id: id })
      if (data.code == '0000') {
        this.$message({
          type: 'success',
          message: data.msg,
        })
        this.getschoolphoto()
      }
    },
    //上传图片成功
    pictureok() {
      this.getschoolphoto()
    },
  },
}
</script>

<style scoped lang='scss'>
.tags {
  background-color: #ecf5ff;
  display: inline-block;
  height: 32px;
  padding: 0 10px;
  line-height: 30px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #d9ecff;
  border-radius: 4px;
  box-sizing: border-box;
  margin-right: 16px;
  background-color: #f4f4f5;
  border-color: #e9e9eb;
  color: #909399;
  &.active {
    color: #409eff;
    border-color: #d9ecff;
    background-color: #ecf5ff;
  }
}
.listBox {
  display: flex;
  flex-wrap: wrap;
}
::v-deep {
  
  .el-upload-list__item{
      width: 176px !important;
    height: 128px !important;
    .el-image{
      width: auto!important;height: auto!important;
    }
  }
}
</style>